<template>
  <div class="page-container">
    <h2 class="page-title">礼品卡</h2>
    <div class="grid">
      <el-card v-for="card in cards" :key="card.id" shadow="hover" class="card">
        <div class="amount">¥{{ card.amount }}</div>
        <div class="desc">{{ card.name }}</div>
        <el-button type="primary" size="small">购买</el-button>
      </el-card>
    </div>
  </div>
</template>
<script setup>
const cards = [
  { id: 1, amount: 100, name: '100元礼品卡' },
  { id: 2, amount: 200, name: '200元礼品卡' },
  { id: 3, amount: 500, name: '500元礼品卡' }
]
</script>
<style scoped>
.page-container { max-width: 900px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-lg); }
.card { display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: center; }
.amount { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--primary-color); }
.desc { color: var(--text-secondary); }
</style>